<template>
    <div>
        <el-form :inline="true" :model="condition" class="search-form" label-width="110px" style="border-bottom: 1px dashed #ddd;">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="箱号：">
                        <el-input v-model="condition['search_LIKE_containerNo']" @input="handleChange" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="作业状态：">
                        <el-select v-model="condition['search_EQ_jobStatus']" placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictJobStatus" :key="key" :label="val" :value="key"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-button type="primary" icon="el-icon-search" @click="loadData" style="margin-left: 40px !important;">查 询
                    </el-button>
                    <el-button @click="handleExport">明细导出</el-button>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="总箱量：">
                        {{ total }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="未作业：">
                        {{ notStart }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="已作业：">
                        {{ completed }}
                    </el-form-item>
                </el-col>
                <el-col :span="8" v-if='showF'>
                    <el-button type="primary" :disabled="!(changeArr.length>0)" @click="toFail">作 废
                    </el-button>
                </el-col>
            </el-row>
        </el-form>
        <el-table v-show='!showF' :data="containerTable" border stripe max-height="500">
            <el-table-column prop="groupNo" label="配组号"  min-width="90" v-if="form.planType!=='JCJH'"></el-table-column>
            <el-table-column prop="jobStatus" label="作业状态"  min-width="105">
                <template slot-scope="scope">
                    {{ scope.row.jobStatus | _filterJobStatus }}
                </template>
            </el-table-column>
            <el-table-column prop="carNo" label="车号"  min-width="90"></el-table-column>
            <el-table-column prop="containerNo" label="箱号"  min-width="120"></el-table-column>
            <el-table-column prop="containerType" label="箱型"  min-width="75"></el-table-column>
            <el-table-column prop="containerSize" label="尺寸"  min-width="75"></el-table-column>
            <el-table-column prop="ifHeavy" label="空重"  min-width="75">
                <template slot-scope="scope">
                    {{ scope.row.ifHeavy | _filterIfHeavyType }}
                </template>
            </el-table-column>
            <el-table-column prop="tradeType" label="内外贸"  min-width="90">
                <template slot-scope="scope">
                    {{ scope.row.tradeType | _filterTradeType }}
                </template>
            </el-table-column>
            <el-table-column prop="stratStationName" label="发站"  min-width="100"></el-table-column>
            <el-table-column prop="endStationName" label="到站"  min-width="100"></el-table-column>
            <el-table-column prop="ownerName" label="箱主"  min-width="120"></el-table-column>
            <el-table-column prop="cargoName" label="货名"  min-width="90"></el-table-column>
            <el-table-column prop="cargoWeight" label="货重"  min-width="75"></el-table-column>
        </el-table>
        <el-table v-show='showF' :data="containerTable" border stripe max-height="500" select-on-indeterminate @selection-change='handleSelection'>
            <el-table-column type="selection" :selectable='disSelect'></el-table-column>
            <el-table-column prop="groupNo" label="配组号"  min-width="90" v-if="form.planType!=='JCJH'"></el-table-column>
            <el-table-column prop="jobStatus" label="作业状态"  min-width="105">
                <template slot-scope="scope">
                    {{ scope.row.jobStatus | _filterJobStatus }}
                </template>
            </el-table-column>
            <el-table-column prop="carNo" label="车号"  min-width="90"></el-table-column>
            <el-table-column prop="containerNo" label="箱号"  min-width="120"></el-table-column>
            <el-table-column prop="containerType" label="箱型"  min-width="75"></el-table-column>
            <el-table-column prop="containerSize" label="尺寸"  min-width="75"></el-table-column>
            <el-table-column prop="ifHeavy" label="空重"  min-width="75">
                <template slot-scope="scope">
                    {{ scope.row.ifHeavy | _filterIfHeavyType }}
                </template>
            </el-table-column>
            <el-table-column prop="tradeType" label="内外贸"  min-width="90">
                <template slot-scope="scope">
                    {{ scope.row.tradeType | _filterTradeType }}
                </template>
            </el-table-column>
            <el-table-column prop="stratStationName" label="发站"  min-width="100"></el-table-column>
            <el-table-column prop="endStationName" label="到站"  min-width="100"></el-table-column>
            <el-table-column prop="ownerName" label="箱主"  min-width="120"></el-table-column>
            <el-table-column prop="cargoName" label="货名"  min-width="90"></el-table-column>
            <el-table-column prop="cargoWeight" label="货重"  min-width="75"></el-table-column>
        </el-table>
        <!-- <el-pagination class="page" @size-change="size=>pageInfo.iDisplayLength=size" layout="total, sizes, prev, pager, next, jumper" :current-page.sync="pageInfo.pageStart" :page-sizes="pageInfo.pageArr" :page-size="pageInfo.iDisplayLength" :total="totals">
        </el-pagination> -->
    </div>
</template>

<script>
import { getJobPlanContainerTable, planFail } from "@/api/jobPlan/jobPlan";
import { newExportExcel } from "@/utils/newExport";
import { ifHeavyType, jobStatus, tradeType } from "@/assets/dict";
export default {
    name: "containerTable",
    props: {
        form: {
            type: Object,
            default: () => {}
        },
        showF:{
            default:false
        }
    },
    data() {
        return {
            condition: {
                search_EQ_planType: "",
                search_EQ_transportMode: "",
                search_EQ_planNo: ""
            },
            containerTable: [],
            pageSearch: getJobPlanContainerTable,
            total: "",
            notStart: "",
            completed: "",
            pageInfo: this.$defalutPage(),
            totals:0,
            changeArr:[]
        };
    },
    mounted() {},
    methods: {
        loadData() {
            let params = this.$assist.copySearchConditions(this.condition); // 获取搜索条件不为空的拷贝
            params.iDisplayStart = this.pageInfo.pageStart - 1;
            params.iDisplayLength = 9999; // 判断是否对列表分页
            params.sortType = "-createDateTime";
            getJobPlanContainerTable(params).then(res => {
                this.total = res.data.aaData[0].total;
                this.notStart = res.data.aaData[0].notStart;
                this.completed = res.data.aaData[0].completed;
                this.containerTable = res.data.aaData[0].container;
                this.totals=res.data.iTotalDisplayRecords
            });
        },
        handleChange(v) {
            let a = v.toUpperCase();
            this.$nextTick(() => {
                this.condition["search_LIKE_containerNo"] = a;
            });
        },
        disSelect(row, index){
            return row.jobStatus === 'NOOPERATE' || row.jobStatus === 'RELEASE'
        },
        handleSelection(val){
           this.changeArr = val
        },
        toFail() {

            this.$confirm('是否确认对选择的数据进行作废?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let data = []
                this.changeArr.forEach(element => {
                    data.push({id:element.id,containerNo:element.containerNo})
                });
                planFail(this.form.planNo, data).then(res => {
                    this.$message({ message: '作废成功!', type: 'success' })
                    this.loadData()
                })
            })
        },
        handleExport() {
            let map = new Map();
            map.set("groupNo", "配组号");
            map.set("jobStatus", "作业状态");
            map.set("carNo", "车号");
            map.set("containerNo", "箱号");
            map.set("containerType", "箱型");
            map.set("containerSize", "尺寸");
            map.set("ifHeavy", "空重");
            map.set("tradeType", "内外贸");
            map.set("stratStationName", "发站");
            map.set("endStationName", "到站");
            map.set("ownerName", "箱主");
            map.set("cargoName", "货名");
            map.set("cargoWeight", "货重");
            let exportRecords = [];
            let exportArr = JSON.parse(JSON.stringify(this.containerTable));
            exportArr.forEach(record => {
                let exportRecord = {};
                for (let [key, value] of map.entries()) {
                    if (key === "jobStatus") {
                        record[key] = jobStatus.get(record[key]);
                    }
                    if (key === "ifHeavy") {
                        record[key] = ifHeavyType.get(record[key]);
                    }
                    if (key === "tradeType") {
                        record[key] = tradeType.get(record[key]);
                    }
                    exportRecord[value] = record[key];
                }
                exportRecords.push(exportRecord);
            });
            newExportExcel("集装箱明细", exportRecords);
        }
    },
    computed: {
        isTr() {
            for (let val of this.containerTable) {
                return val.hasOwnProperty("wagonNo");
            }
        },
        isCr() {
            for (let val of this.containerTable) {
                return val.hasOwnProperty("plateNumber");
            }
        }
    },
    watch: {
        pageInfo: {
            deep: true,
            handler: function() {
                this.loadData();
            }
        }
    }
};
</script>

<style scoped>
</style>
